<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-box">
      <input class="search-input" type="text" placeholder="搜索" />
    </view>

    <!-- 主体内容布局 -->
    <view class="content">
      <!-- 左边分类列表 -->
      <scroll-view class="category" scroll-y>
        <view v-for="(category, index) in categories" :key="index" @click="selectCategory(index)">
          <image :src="'../../static/buy/' + (index+1) + '.png'"></image>
        </view>
      </scroll-view>

      <!-- 右边相关数据布局 -->
      <view class="data">
        <view class="share" style="margin-top: 10px;">
          <image src="../../static/buy/share.png" style="height: 10vh;width: 95%;border-radius: 20px;"></image>
        </view>
        <view class="swiper">
          <image src="../../static/swiper/1.png" style="height: 20vh;width: 95%;border-radius: 20px;"></image>
        </view>
        <view v-for="(item, index) in selectedCategoryData" :key="index" class="item">
          <view class="detail">
            <image src="../../static/buy/1.png"></image>
            <view class="info" style="height: 100%;width: 80%;">
              <view style="font-size: 15px;font-weight: 600;">{{ item.name }}</view>
              <view style="font-size: 12px;color: #b7b7b8;">{{ item.description }}</view>
              <view style="font-size: 16px;font-weight: 600;margin-top:20px;display: flex;height:20%;width: 90%">
                <view  style="line-height: 100%;">¥{{ item.price }}</view>
                <button @click="buy(item)" style="line-height: 100%;margin-right: 0px;border-radius: 100%;background-color:#008866;color: white;">+</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <uni-popup ref="popup" type="message">
    	<uni-popup-message type="success" message="添加成功" :duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { 
          name: '常规奶茶', 
          data: [
            { name: '珍珠奶茶', description: '经典的奶茶，加上QQ的珍珠，口感丰富。', price: 16 },
            { name: '抹茶奶茶', description: '以抹茶粉调制的奶茶，清香而不腻。', price: 18 },
            { name: '芒果奶茶', description: '新鲜的芒果搭配奶茶，酸甜可口。', price: 20 }
          ] 
        },
        { 
          name: '特调奶茶', 
          data: [
            { name: '焦糖奶茶', description: '加入焦糖的奶茶，香甜可口。', price: 17 },
            { name: '布丁奶茶', description: '加入软糯的布丁，口感丰富。', price: 19 },
            { name: '椰果奶茶', description: '椰子果肉与奶茶的完美结合，清新可口。', price: 22 }
          ] 
        },
        { 
          name: '水果茶', 
          data: [
            { name: '香蕉奶茶', description: '香甜的香蕉搭配奶茶，口感浓郁。', price: 21 },
            { name: '草莓奶茶', description: '新鲜的草莓与奶茶的完美融合，酸甜可口。', price: 23 }
          ] 
        },
        { 
          name: '特色奶茶', 
          data: [
            { name: '芝士奶盖茶', description: '浓郁的奶香与芝士香融合，丝滑细腻。', price: 25 },
            { name: '波霸奶茶', description: '大颗波霸配以浓郁奶茶，口感独特。', price: 24 }
          ] 
        }
      ],
      selectedIndex: 0
    };
  },
  computed: {
    selectedCategoryData() {
      return this.categories[this.selectedIndex].data;
    }
  },
  methods: {
    selectCategory(index) {
      this.selectedIndex = index;
    },
    buy(item) {
      console.log(item);
      // 获取之前存储的对象数组
      let clickedItems = uni.getStorageSync('clicked_items') || [];
      // 将新的项目对象添加到数组中
      clickedItems.push(item);
      // 将更新后的数组存储到本地存储中
      uni.setStorageSync('clicked_items', clickedItems);
      this.$refs.popup.open();
    },
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.search-box {
  display: flex;
  width: 50%;
  padding: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.search-input {
  flex: 1;
  margin-right: 10px;
  padding: 5px;
  width: 50%;
  border: 1px solid #ccc;
  border-radius: 20px;
}

.search-button {
  background-color: #007F61;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.content {
  flex: 1;
  display: flex;
}

.category {
  flex: none;
  width: 15vw;
  border-right: 1px solid #ccc;
  overflow-y: scroll; /* 添加滚动 */
  background-color: #F0F1F2;
  
  image{
    width: 100%;
    height: 10vh;
  }
}

.data {
  flex: 1;
  padding-left: 10px;
  overflow-y: scroll; /* 添加滚动 */
  background-color: white;
}

.category-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.item {
  margin-bottom: 10px;
  
  .detail{
    display: flex;
    height: 10vh;
    width: 95%;
    
    image{
      height: 90%;
      width: 20%;
      margin: 5px;
    }
  }
}
</style>
